<div class="bjui-pageHeader">
    <form id="pagerForm" data-toggle="ajaxsearch" action="${request.getContextPath()}/eqp/eqptotal" method="post">
        <div class="bjui-searchBar">
            <g:hiddenField name="SYS_QUERY_NAME" value="eqptotal" />
            <g:hiddenField name="EXPORT_CONTENT_NAME" value="Excel" />


        </div>
    </form>
</div>

<div class="bjui-pageContent">
    <table>


        <div class="row" style="padding: 0 8px;">
            <div class="col-md-4" style="padding: 0px;margin: 0px">
                <div class="panel panel-default" >
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-line-chart fa-fw"></i>

                            DIFF/IMP/CVD


                        </h3>
                    </div>
                    <div class="panel-body">
                        <div  id="101main" style="height: 220px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" style="padding: 0px;margin: 0px">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-line-chart fa-fw"></i>

                            LITHOGRAPHY


                        </h3>
                    </div>
                    <div class="panel-body">
                        <div  id="101main1" style="height: 220px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" style="padding: 0px;margin: 0px">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-line-chart fa-fw"></i>

                            WET


                        </h3>
                    </div>
                    <div class="panel-body">
                        <div  id="101main2" style="height: 220px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" style="padding: 0px;margin: 0px">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-line-chart fa-fw"></i>

                            PVD/ETCH


                        </h3>
                    </div>
                    <div class="panel-body">
                        <div  id="101main3" style="height: 220px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" style="padding: 0px;margin: 0px">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-line-chart fa-fw"></i>

                            PACKAGING/WAT/OQC


                        </h3>
                    </div>
                    <div class="panel-body">
                        <div  id="101main4" style="height: 220px;"></div>
                    </div>
                </div>
            </div>
            <div class="col-md-4" style="padding: 0px;margin: 0px">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><i class="fa fa-line-chart fa-fw"></i>

                            DCM


                        </h3>
                    </div>
                    <div class="panel-body">
                        <div  id="101main5" style="height: 220px;"></div>
                    </div>
                </div>
            </div>
        </div>
    </table>
    <div>
        <table  data-toggle="tablefixed" data-width="100%" data-nowrap="true">
            <thead>
            <tr>
                <th></th>
                <th>DIFF</th>
                <th>IMP</th>
                <th>LITHOGRAPHY</th>
                <th>ETCH</th>
                <th>WET</th>
                <th>CVD</th>
                <th>PVD</th>
                <th>PACKAGING</th>
                <th>DCM</th>
                <th>WAT</th>
                <th>OQC</th>
            </tr>
            </thead>
            <tbody>
            <g:each in="${eqplist}" status="i" var="dataInstance">
                <tr>
                    <td>${dataInstance.SUB_STATE}</td>
                    <td>
                        <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=DIFF&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.DIFF}</a>
                    </td>
                    <td>
                        <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=IMP&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.IMP}</td>
                    </td>
                <td>
                    <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=LITHOGRAPHY&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.LITHOGRAPHY}</td>
                </td>
                    <td>
                        <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=ETCH&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.ETCH}</a>
                    </td>
                <td>
                    <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=WET&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.WET}</a>
                </td>
                    <td>
                        <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=CVD&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.CVD}</a>
                    </td>
                <td>
                    <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=PVD&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.PVD}</a>
                </td>
                    <td>
                        <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=PACKAGING&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.PACKAGING}</td>
                    </td>
                <td>
                    <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=DCM&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.DCM}</td>
                </td>
                    <td>
                        <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=WAT&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.WAT}</a>
                    </td>
                <td>
                    <a data-toggle="navtab" data-id="eqpStutas-navtab-form" data-title="EqpDetailReport"href="${request.getContextPath()}/eqp/eqpList?LOCATION=OQC&SUB_STATE=${dataInstance.SUB_STATE}">${dataInstance.OQC}</a>
                </td>
                </tr>
            </g:each>
            </tbody>
        </table>
    </div>
</div>


<script  src="${request.getContextPath()}/js/echarts/echarts.js"></script>
<script  src="${request.getContextPath()}/js/echarts/echarts-tool.js"></script>
<g:if test="${eqptotalimg.size()>0}">
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var contextPath = "${request.getContextPath()}";
        eChartsTool.init(contextPath);
        /* var data=[];
        <g:each in="${eqptotalimg}" status="i" var="tableInstance">
        <g:if test="${tableInstance.SUB_STATE=='HIC'}">
         data.push('${tableInstance.SUB_STATE}')
        </g:if>
        </g:each>*/

        // 指定图表的配置项和数据
        option = {
            title : {
                text: 'DIFF/IMP/CVD',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['RUN','IDLE','DOWN','PM','OTH']
            },

            calculable : true,
            series : [
                {
                    name:'',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        <g:each in="${eqptotalimg}" status="i" var="dataInsatance">
                        {value:${dataInsatance.DIFF},name:'${dataInsatance.SUB_STATE}'},
                        </g:each>
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        eChartsTool.setOption("roma", document.getElementById('101main'), option);

    </script>



    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var contextPath = "${request.getContextPath()}";
        eChartsTool.init(contextPath);
        /*var data=[];
        <g:each in="${eqptotalimg}" status="i" var="tableInstance">
        <g:if test="${tableInstance.SUB_STATE=='TEC'}">
         data.push('${tableInstance.SUB_STATE}')
        </g:if>
        </g:each>*/

        // 指定图表的配置项和数据
        option = {
            title : {
                text: 'LITHOGRAPHY',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['RUN','IDLE','DOWN','PM','OTH']
            },

            calculable : true,
            series : [
                {
                    name:'',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        <g:each in="${eqptotalimg}" status="i" var="dataInsatance">
                        {value:${dataInsatance.IMPLITHOGRAPHY},name:'${dataInsatance.SUB_STATE}'},
                        </g:each>
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        eChartsTool.setOption("roma", document.getElementById('101main1'), option);

    </script>


    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var contextPath = "${request.getContextPath()}";
        eChartsTool.init(contextPath);
        /*var data=[];
        <g:each in="${eqptotalimg}" status="i" var="tableInstance">
        <g:if test="${tableInstance.SUB_STATE=='SIC'}">
         data.push('${tableInstance.SUB_STATE}')
        </g:if>
        </g:each>*/

        // 指定图表的配置项和数据
        option = {
            title : {
                text: 'WET',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['RUN','IDLE','DOWN','PM','OTH']
            },

            calculable : true,
            series : [
                {
                    name:'',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        <g:each in="${eqptotalimg}" status="i" var="dataInsatance">
                        {value:${dataInsatance.ETCHWET},name:'${dataInsatance.SUB_STATE}'},
                        </g:each>
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        eChartsTool.setOption("roma", document.getElementById('101main2'), option);

    </script>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var contextPath = "${request.getContextPath()}";
        eChartsTool.init(contextPath);
        /* var data=[];
        <g:each in="${eqptotalimg}" status="i" var="tableInstance">
        <g:if test="${tableInstance.SUB_STATE=='HIC'}">
         data.push('${tableInstance.SUB_STATE}')
        </g:if>
        </g:each>*/

        // 指定图表的配置项和数据
        option = {
            title : {
                text: 'PVD/ETCH',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['RUN','IDLE','DOWN','PM','OTH']
            },

            calculable : true,
            series : [
                {
                    name:'',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        <g:each in="${eqptotalimg}" status="i" var="dataInsatance">
                        {value:${dataInsatance.CVDPVD},name:'${dataInsatance.SUB_STATE}'},
                        </g:each>
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        eChartsTool.setOption("roma", document.getElementById('101main3'), option);

    </script>



    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var contextPath = "${request.getContextPath()}";
        eChartsTool.init(contextPath);
        /*var data=[];
        <g:each in="${eqptotalimg}" status="i" var="tableInstance">
        <g:if test="${tableInstance.SUB_STATE=='TEC'}">
         data.push('${tableInstance.SUB_STATE}')
        </g:if>
        </g:each>*/

        // 指定图表的配置项和数据
        option = {
            title : {
                text: 'PACKAGING/WAT/OQC',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['RUN','IDLE','DOWN','PM','OTH']
            },

            calculable : true,
            series : [
                {
                    name:'',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        <g:each in="${eqptotalimg}" status="i" var="dataInsatance">
                        {value:${dataInsatance.PACKAGINGDCM},name:'${dataInsatance.SUB_STATE}'},
                        </g:each>
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        eChartsTool.setOption("roma", document.getElementById('101main4'), option);

    </script>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var contextPath = "${request.getContextPath()}";
        eChartsTool.init(contextPath);
        /*var data=[];
        <g:each in="${eqptotalimg}" status="i" var="tableInstance">
        <g:if test="${tableInstance.SUB_STATE=='SIC'}">
         data.push('${tableInstance.SUB_STATE}')
        </g:if>
        </g:each>*/

        // 指定图表的配置项和数据
        option = {
            title : {
                text: 'DCM',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                orient : 'vertical',
                x : 'left',
                data:['RUN','IDLE','DOWN','PM','OTH']
            },

            calculable : true,
            series : [
                {
                    name:'',
                    type:'pie',
                    radius : '55%',
                    center: ['50%', '60%'],
                    data:[
                        <g:each in="${eqptotalimg}" status="i" var="dataInsatance">
                        {value:${dataInsatance.WATOQC},name:'${dataInsatance.SUB_STATE}'},
                        </g:each>
                    ]
                }
            ]
        };

        // 使用刚指定的配置项和数据显示图表。
        eChartsTool.setOption("roma", document.getElementById('101main5'), option);

    </script>
</g:if>



